<template>
  <c-view>
    <template v-slot:header>
      <el-page-header @back="goBack" :content="$route.meta.title"></el-page-header>
    </template>
    <el-form ref="formRef" :model="formModel" :rules="rules" label-width="120px" class="form" label-position="right" status-icon>
      <c-card name="基本信息" class="form-card">
        <el-form-item label="所属城市:" prop="companyCityCode">
          <query-dict :dict-list="cityList" class="select-item" placeholder="请选择所属城市" :value.sync="formModel.companyCityCode"></query-dict>
        </el-form-item>
        <el-form-item label="所属企业:" prop="companyName">
          <el-input v-model.trim="formModel.companyName" placeholder="请输入所属企业" class="form-item" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="组织机构号码:">
          <el-input v-model.trim="formModel.organizationCode" placeholder="请输入组织机构号码" class="form-item" clearable></el-input>
        </el-form-item>
        <el-form-item label="营业执照:">
          <c-upload
            ref="curUpload"
            class="pic"
            auto-upload
            action="/api/upload/file"
            list-type="picture-card"
            :http-request="uploadHandle"
            :size="10"
            :limit="1"
            :fileList="formModel.fileList"
            @on-success="uploadSuccess"
            :on-remove="uploadRemove"
            :on-preview="uploadReview"
          >
            <i class="el-icon-plus"></i>
            <div class="info">只能上传png,jpg,jpeg,gif图片文件，且不能大于10M</div>
          </c-upload>
        </el-form-item>
        <el-form-item label="企业级别:" prop="companyLevel">
          <el-input v-model.trim="formModel.companyLevel" placeholder="请输入企业级别" class="form-item" clearable></el-input>
        </el-form-item> -->
        <el-form-item label="企业法人:" prop="linkmanName">
          <el-input v-model.trim="formModel.linkmanName" placeholder="请输入负责人姓名" class="form-item" clearable></el-input>
        </el-form-item>
        <el-form-item label="企业法人手机:" prop="linkmanPhone">
          <el-input v-model.trim="formModel.linkmanPhone" placeholder="请输入负责人手机号" class="form-item" maxlength="11" clearable></el-input>
        </el-form-item>
        <el-form-item label="详细地址:">
          <el-input
            type="textarea"
            :rows="4"
            maxlength="100"
            show-word-limit
            placeholder="请输入详细地址"
            v-model="formModel.companyAddress"
          ></el-input>
        </el-form-item>
        <el-form-item label="车况检查:" prop="isForceImg">
          <query-dict :dict-list="forceImgList" showType="radio" class="select-item" :value.sync="formModel.isForceImg"></query-dict>
        </el-form-item>
        <!-- <el-form-item label="是否启用:" prop="status">
          <query-dict :dict-list="disabledStatus" showType="radio" class="select-item" :value.sync="formModel.status"></query-dict>
        </el-form-item> -->
        <!-- <el-form-item label="客服人员:">
          <el-input v-model.trim="formModel.responsiblePerson" placeholder="请输入客服人员" class="form-item" clearable></el-input>
        </el-form-item>
        <el-form-item label="客服手机号码:">
          <el-input
            v-model.trim="formModel.responsiblePersonPhone"
            placeholder="请输入客服手机号码"
            class="form-item"
            maxlength="11"
            clearable
          ></el-input>
        </el-form-item> -->
        <el-form-item label="合作开始时间:">
          <el-date-picker
            class="select-item"
            v-model="formModel.joinStart"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择合作开始时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="合作结束时间:">
          <el-date-picker
            class="select-item"
            v-model="formModel.joinEnd"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择合作结束时间"
          ></el-date-picker>
        </el-form-item>
      </c-card>
      <!-- <c-card name="企业经营相关" class="form-card">
        <el-form-item label="企业账号:">
          <el-input v-model.trim="formModel.companyAccount" placeholder="请输入企业账号" class="form-item" clearable></el-input>
        </el-form-item>
        <el-form-item label="企业密码:">
          <el-input v-model.trim="formModel.companyPassword" placeholder="请输入企业密码" class="form-item" clearable></el-input>
        </el-form-item>
        <el-form-item label="管理人员:">
          <el-input v-model.trim="formModel.companyManager" placeholder="请输入管理人员" class="form-item" clearable></el-input>
        </el-form-item>
        <el-form-item label="管理人员手机号码:">
          <el-input v-model.trim="formModel.companyManagerPhone" placeholder="请输入管理人员手机号码" class="form-item" clearable></el-input>
        </el-form-item>
        <el-form-item label="客服人员:">
          <el-input v-model.trim="formModel.responsiblePerson" placeholder="请输入客服人员" class="form-item" clearable></el-input>
        </el-form-item>
        <el-form-item label="客服手机号码:">
          <el-input v-model.trim="formModel.responsiblePersonPhone" placeholder="请输入客服手机号码" class="form-item" clearable></el-input>
        </el-form-item>
        <el-form-item label="推荐人:">
          <el-input v-model.trim="formModel.generalizePerson" placeholder="请输入推荐人" class="form-item" clearable></el-input>
        </el-form-item>
        <el-form-item label="合作开始时间:">
          <el-date-picker
            class="select-item"
            v-model="formModel.joinStart"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择合作开始时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="合作结束时间:">
          <el-date-picker
            class="select-item"
            v-model="formModel.joinEnd"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择合作结束时间"
          ></el-date-picker>
        </el-form-item>
      </c-card> -->
      <el-form-item class="form-btn">
        <el-button :size="size" :loading="btnLoading" type="primary" @click.native.prevent="submitHandle">
          {{ $route.params.id ? '更新保存' : '新增提交' }}
        </el-button>
        <el-button :size="size" @click.native.prevent="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </c-view>
</template>

<script>
import MixinForm from 'mixins/form'
import CCard from 'components/card'
import dictObj from '@/store/dictData'
import utils from 'utils'

export default {
  name: 'shopMerchantInfo',
  mixins: [MixinForm],
  components: {
    CCard
  },
  data() {
    return {
      disabledStatus: dictObj.disabledStatus,
      forceImgList: [
        {
          label: '强制',
          value: 1
        },
        {
          label: '非强制',
          value: 0
        }
      ],
      formModel: {
        companyAddress: '', // 详细地址
        companyCityCode: '', // 城市编码
        companyName: '', //所属企业
        organizationCode: '', //组织机构
        companyLevel: '',
        linkmanName: '',
        linkmanPhone: '',
        companyAccount: '',
        companyPassword: '',
        companyManager: '',
        companyManagerPhone: '',
        responsiblePerson: '',
        responsiblePersonPhone: '',
        generalizePerson: '',
        joinStart: '',
        joinEnd: '',
        isForceImg: 1
      },
      btnLoading: false,
      rules: {
        companyCityCode: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
        companyName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        linkmanName: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
        linkmanPhone: [{ required: true, message: '请输入法人电话号码', trigger: 'blur' }],
        isForceImg: [{ required: true, message: '请选择是否检查车况', trigger: 'change' }]
      }
    }
  },

  created() {
    const { cityCode, cityName } = utils.getStore('cityInfo')
    const cityList = utils.getStore('cityList')
    if (cityCode !== '00') {
      this.cityList = [
        {
          label: cityName,
          value: cityCode
        }
      ]
      this.formModel.cityCode = cityCode
    } else {
      this.cityList = this.$store.getters.allCity.length ? this.$store.getters.allCity : cityList
    }
    const { id } = this.$route.params
    id && this.getCompany(id)
  },

  methods: {
    getCompany(id) {
      this.isLoading = true
      this.$api.member
        .fetch('companyList', {
          id,
          rows: 1,
          offset: 1
        })
        .then(res => {
          this.isLoading = false
          if (res && res.totalCount) {
            const { data } = res
            this.formModel = data[0]
          }
        })
    },
    submitHandle() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const { id } = this.$route.params
          const actionName = id ? 'companyUpdate' : 'companyAdd'
          const params = id ? { ...this.formModel, id } : this.formModel
          this.$api.member.fetch(actionName, params).then(() => {
            this.$msgTip(id ? '更新成功' : '新增成功').then(() => {
              this.closeCurrentTag()
              this.goBack()
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.form {
  padding: 15px 15px;
  background-color: @white;
  .form-item {
    width: 50%;
  }
  .select-item {
    width: 30%;
  }
  .form-btn {
    margin-top: 20px;
    margin-left: 20px;
  }
  .pic {
    padding-bottom: 25px;
    span {
      display: inline-block;
      margin-bottom: 10px;
    }
    .info {
      height: 20px;
      margin-top: 5px;
      font-size: @f12;
      line-height: 20px;
    }
  }
}
.preview {
  box-sizing: border-box;
  text-align: center;

  img {
    align-items: center;
    justify-items: center;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>
